<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>HTML5 MediaElement - HLS</title>	
	
	<script src="../build/jquery.js"></script>	
	<script src="../build/mediaelement-and-player.min.js"></script>
	<script src="testforfiles.js"></script>	
	<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
</head>
<body>

<h1>MediaElementPlayer.js</h1>

<h2>HLS Wrapper</h2>

<code><pre>
&lt;video width="640" height="360" id="player1" preload="none"&gt;

	&lt;!-- Pseudo HTML5 --&gt;
	&lt;source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8" /&gt;

&lt;/video&gt;
</pre></code>

<video width="640" height="360" id="player1">
    
    <!-- Pseudo HTML5 -->
    <source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8" />

</video>
	
<span id="player1-mode"></span>

<h3> Test Videos </h3>
<div> The following videos should stream correctly. Each time an
issue is reported with a sample playlist, it will be added in the list
and verified after bugfixing </div>
<ul id="streamlist">
</ul>

Check with your own Playlist ! <a href="http://kb2.adobe.com/cps/142/tn_14213.html">beware of Cross Domain Policy</a><br>
<input id="userInput" value="http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8" size="80"> <button onclick="userSubmit()">Load and Play</button><br>
<p>

<script type="text/javascript" src="hls_streams.js"></script>
<script type="text/javascript">

function listStreams(list, container) {
for(var i=0; i<list.length; i++) { var entry = document.createElement("li");
entry.innerHTML = "<a href='#' onclick='return loadStream(\""+list[i].file+"\")'>"+list[i].title+"</a>";
document.getElementById(container).appendChild(entry);
}
}
listStreams(teststreams, "streamlist");

function userSubmit() {
   loadStream(document.getElementById('userInput').value);
}
function loadStream(url) {
$('video')[0].player.setSrc(url);
$('video')[0].player.play();
}

</script>


<script>

$('video').mediaelementplayer({
	success: function(media, node, player) {
		$('#' + node.id + '-mode').html('mode: ' + media.pluginType);
	}
});

</script>

</body>
</html>